<template>
  <div class="search-container">
    <van-search
      v-model="searchData.value"
      :placeholder="searchData.placeholder"
      background="#f3f4f6"
      @search="onSearch"
      @clear="onClear"
      @input="onSearch"
    ></van-search>
  </div>
</template>

<script>
export default {
  name: 'SearchBar',
  props: {
    searchData: {
      type: Object,
      required: true
    },
    onSearch: {
      type: Function,
      default: () => {
      }
    },
    onClear: {
      type: Function,
      default: () => {
      }
    }
  },
  data() {
    return {}
  },
  mounted() {

  },
  methods: {}
}
</script>

<style lang="scss" scoped>
	.search-container {
		width: 100%;
		box-sizing: border-box;

		/deep/ .van-search {
			padding: 0 0.28rem 0.2rem !important;

			.van-search__content {
				background-color: #ffffff !important;

				.van-field__left-icon {
					display: flex !important;
					align-items: center;

					.van-icon-search {
						font-size: 0.35rem !important;
					}
				}

				.van-field__control {
					font-size: 0.3rem !important;
					height: 0.7rem !important;
				}
			}
		}

	}
</style>
